import { driver } from "driver.js";
import { ref } from "vue";
export const useDriver = () => {
  const mydriver = ref(null);
  mydriver.value = driver({
    showProgress: true,
    nextBtnText: "下一步",
    prevBtnText: "上一步",
    doneBtnText: "结束",
    steps: [
      {
        popover: {
          title: "欢迎进入脸谱大屏工具功能引导",
          description: "此引导将提示你怎么进行操作",
        },
      },
      {
        element: "#driver_header",
        popover: {
          title: "这是头部功能区",
          description: "点击按钮来进行各种操作",
        },
      },
      {
        element: "#driver_preview",
        popover: {
          title: "这是预览按钮",
          description: "点击按钮将打开预览页面",
        },
      },
      {
        element: "#driver_save",
        popover: {
          title: "这是保存按钮",
          description: "点击按钮将把当前页面保存为模板",
        },
      },
      {
        element: "#driver_import",
        popover: {
          title: "这是导入按钮",
          description: "点击按钮将导入配置文件并显示在页面上",
        },
      },
      {
        element: "#driver_export",
        popover: {
          title: "这是导出按钮",
          description: "点击按钮将当前页面导出一个配置文件",
        },
      },
      {
        element: "#driver_codeGen",
        popover: {
          title: "这是代码生成按钮",
          description: "点击按钮将当前页面导出为代码",
        },
      },
      {
        element: "#driver_leftPart",
        popover: {
          title: "这里是左侧组件区域",
          description: "选择合适的组件使用鼠标拖拽组件到画布即可",
        },
      },
      {
        element: "#driver_centerPart",
        popover: {
          title: "这是画布编辑区域",
          description:
            "将组件拖拽到画布中，进行编辑和预览，可以调整组件的位置和大小。",
        },
      },
      {
        element: "#driver_editPart",
        popover: {
          title: "这里是右侧的编辑配置区域",
          description: "可以对画布以及组件进行各种编辑操作和配置",
        },
      },
    ],
  });

  return {
    mydriver,
  };
};
